<template>
  <div class="student_wrap">
    <div class="item" v-for="item in userList" :key="item.id" @click="clickStudent(item)">
      <div class="avatar">
        <img :src="( item.headUrl)" alt="" v-if="item.headUrl">
        <img src="../assets/avatar.png" alt="" v-else>
      </div>
      <div class="userName">{{item.studentName}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userList: []
      }
    },
    beforeRouteEnter(to, from, next) {
      if (from.path === '/mine') {
        to.meta.isBack = false;
      } else {
        to.meta.isBack = true;
      }
      next()
    },
    activated() {
      if (!this.$route.meta.isBack) {
        this.userList = this.$route.params.infos
        this.from = this.$route.params.from
      }
    },
    created() {
      this.userList = this.$route.params.infos
      this.from = this.$route.params.from
    },
    mounted() {
      this.$forceUpdate()
    },
    methods: {
      clickStudent(e) {
        if (this.from == 'evaluateList') {
          this.$router.push({ path: '/'+this.from, query: {info: e.id }})
          return
        }

        // 积分商场跳转逻辑
        if (this.from == 'pointsMall') {
          this.$router.push({ name: this.from, params: {studentInfo: e }})
          return
        }

        // 判断当前路由，如果是从带底部菜单的选择学生页面跳转过来，则跳转回带底部菜单的页面
        if (this.$route.name === 'selectStudentWithTabbar') {
          // 从带底部菜单的选择学生页面跳转，需要跳转回带底部菜单的页面
          if (this.from === 'classListList') {
            // 跳转到课程列表页面（带底部菜单）
            this.$router.push({
              name: this.from,
              params: {info: e }
            })
          } else {
            this.$router.push({ name: this.from, params: {info: e }})
          }
        } else {
          // 从普通选择学生页面跳转，正常跳转
          this.$router.push({ name: this.from, params: {info: e }})
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .student_wrap {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    // align-items: center;
    // justify-content: center;
    .item {
      width: 100%;
      height: 90px;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 6px;
      box-shadow: 0px 2px 8px 0px rgba(150, 150, 150, 0.2);
      display: flex;
      align-self: center;
      margin-bottom: 20px;
      .avatar {
        width: 60px;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
      }
      .userName {
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 20px;
        box-sizing: border-box;
        font-weight: 600;
        font-size: 18px;
        color: #333;
      }
    }
    .item:last-child {
      margin-bottom: 0px;
    }
  }
</style>
